<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/register.css"/>
    <style>
        label{color: red}
    </style>
    <script src="js/respond.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/register.js"></script>
    <script src="js/gVerify.js"></script>
</head>
<body>
<div>
    <div style="height: 50px"></div>
<nav class="navbar">
<div class="container">
 <div class="nav navbar-nav collapse navbar-left navbar-collapse">
     <img src="img/logo5.png" alt=""/>
 </div>
    <div class="nav navbar-nav collapse navbar-right navbar-collapse">
        <p style="padding-top: 16px">已有绿道账号,<a href="login.html" style="text-decoration: none">直接登录<img src="img/arrow.png"></a></p>
    </div>
</div>
</nav>
</div>
<div style="height: 150px"></div>
<div class="container">

    <div class="row" >
        <div class="col-md-offset-3">
            <h1>手机注册</h1>
            <!--<p style="margin-left: 70px"><a href="">or&nbsp;邮箱注册</a></p>-->
        </div>
        <div class="col-md-offset-5">
            <form action="" method="post" class="reg-form" id="reg-form" role="form" class="form" >
                <div class="reg-input form-group">
                    <input type="text"  name="userName" id="userName" placeholder="用户名(6-24位字母数字)"/>
                    <div class="border"></div>
                </div>
                <div class="reg-input form-group">
                    <input type="text" name="mobile" id="mobile" placeholder="手机号码11位数"/>
                    <div class="border"></div>
                </div>
                <!--<div class="reg-input form-group">
                    <input type="text" name="tel1" id="tel1" placeholder="手机验证码"/>
                    <input type="button" value="发送验证码" style="margin-left: 50px;background: #00aeff"/>
                    <div class="border" style="width: 180px"></div>
                </div>-->
                <div class="reg-input form-group">
                    <input type="password" name="pwd" id="pwd" placeholder="密码(不少于6位)"/>
                    <div class="border"></div>
                </div>
                <div class="colRight">
                    <div style="float: left">
                        <input type="radio" value="企业用户" name="userType" />
                        <span style="position: relative;top: -3px">企业用户</span>
                    </div>
                    <div style="padding-left: 100px">
                        <input type="radio" value="个人用户" name="userType"/>
                        <span style="position: relative;top: -3px">个人用户</span>
                    </div>
                </div>
                <!--<div id="hh">
                <div id="v_container" style="width: 200px;height: 50px;"></div>
                <input type="text" id="code_input" value="" placeholder="请输入验证码"/>
                    <button id="my_button">验证</button>
                    </div>-->

                <br/>

                <div class="submit-box form-group ">
                    <input type="checkbox" name="remember" value="1" id="check" /> 我已同意用户协议<a style="text-decoration: none">《绿道用户服务协议》</a>
                </div>


                <br/>
                <br/>
                <button class="btn btn-info" style="width: 200px" id="tj" onclick="sendRequest()">注册</button>
           </form>
        </div>
    </div>
</div>
<script>
    //var verifyCode = new GVerify("v_container");
//<!-- onclick="return checkAgreement();"-->
    //document.getElementById("tj").onclick = function(){
        //var res = verifyCode.validate(document.getElementById("code_input").value);
        //if(res){
           // alert("验证正确");
        //}else{
            //alert("验证码错误");
        //}
    //}
</script>
<script>

    $(function(){
        //var verifyCode = new GVerify("v_container");
        $("#tj").click(function(){
            //$("#reg-form").submit();
           // alert(123)
           $.ajax({
               cache: true,
               type: "POST",
               url:"http://120.24.1.213:8080/web_juhe/servlet/Register",
               data:$('#reg-form').serialize(),
               async: false,
               error: function(request) {
                   alert("请完善个人信息");
               },
               success: function(data) {
                   if(data.code==0000){
                       window.open("login.html")
                   }

               }
            });
        });
        $("#reg-form").validate({
            rules:{
                userName:{
                    required:true,
                    rangelength:[6,13]
                },
                pwd:{
                    required:true,
                    rangelength:[6,16]
                },

                mobile:{
                    required:true,
                    minlength:11
                }
                // ,
                //tel1:{
                // required:true,
                // rangelength:[4]
                //}

            },
            messages:{
                userName:{
                    required:"不能为空",
                    rangelength:"昵称6~10之间"
                }
                ,
                pwd:{
                    required:"密码不能为空",
                    rangelength:"密码6~16之间"
                }
                ,

                mobile:{
                    required:"号码不能为空",
                    minlength:"手机号码不能少于11位"
                }
                ,
                //,
                //tel1:{
                //    required:"请输入验证码",
                // rangelength:"验证码输入错误"
                // }
                kaptchaImage:{
                    required:"请输入验证码",
                    remote: "验证码不正确",
                },



            }

        });

    });

    var verifyCode = new GVerify("v_container");
    var s=  document.getElementById("my_button").onclick=function(){

        var res = verifyCode.validate(document.getElementById("code_input").value);
        if(res){
            alert("验证正确");
       return true;
        }else{
            alert("验证码错误");
          return false;
    }
    }
    function checkAgreement(){
       // var verifyCode = new GVerify("v_container");
        if(document.getElementById("check").checked==false){
            alert("请同意用户协议!");
            //document.getElementById("check").focus();
            return false;
        };
        if(!$("input[name='userType']").is(":checked")){//如果name为sex的input没有被选中
            alert('请选择个人用户或企业用户');//弹出提示
            return false;// 返回假值表单不会提交
        }else{
            return true;// 返回真值表单提交
        };




    }
</script>
<script>
    window.onload=function(){
        if(navigator.userAgent.indexOf("Opera") != -1) {
            //alert('Opera');
        }
        else if(navigator.userAgent.indexOf("MSIE") != -1) {
            //alert('Internet Explorer');
            document.getElementById("hh").style.display="none"
        }
        else if(navigator.userAgent.indexOf("Firefox") != -1) {
            //alert('Firefox');
        }
        else if(navigator.userAgent.indexOf("Netscape") != -1) {
            //alert('Netscape');
        }
        else if(navigator.userAgent.indexOf("Safari") != -1) {
            //alert('Safari');
        }
        else{
            //alert('无法识别的浏览器。');
        }}
</script>
</body>
</html>